import React from 'react';
import { StyleSheet, Text, View ,StatusBar,Platform} from 'react-native';

import {
    Router,
    Reducer,
    Stack,
    Scene,
    Actions,
    Tabs,
} from 'react-native-router-flux';
import TabIcon from './jscode/tab/TabIcon';
import AddressBookTabPage from './jscode/tab/AddressBookTabPage'
import EnquiriesTabPage from'./jscode/tab/EnquiriesTabPage'
import PersonalCenterTabPage from'./jscode/tab/PersonalCenterTabPage'
import LoginPage from './jscode/page/Login/LoginPage'
import VerificationLoginPage from'./jscode/page/Login/VerificationLoginPage'
import RegistrationPage from'./jscode/page/Login/RegistrationPage'
import RegistrationNextPage from'./jscode/page/Login/RegistrationNextPage'
import RegistrationPasswordLoginPage from'./jscode/page/Login/RegistrationPasswordLoginPage'
import UploadPage from './jscode/page/enquiries/UploadPage'
import InquireResultPage from'./jscode/page/enquiries/InquireResultPage'
import PersonalDataPage from'./jscode/page/enquiries/PersonalDataPage'
import ModifyPage from'./jscode/page/MySelfDataPage/ModifyPage'
import CertificationPage from'./jscode/page/MySelfDataPage/CertificationPage'
import BackUpDetailsPage from'./jscode/page/MySelfDataPage/BackUpDetailsPage'
import AuditPage from'./jscode/page/MySelfDataPage/AuditPage'
import ModifyLendingInformationPage from'./jscode/page/MySelfDataPage/ModifyLendingInformationPage'
import LoanPersonalInformationPage from'./jscode/page/MySelfDataPage/LoanPersonalInformationPage'
import ArrearsModifyInformationPage from'./jscode/page/MySelfDataPage/ArrearsModifyInformationPage'
import ArrearsDetailedInformationPage from'./jscode/page/MySelfDataPage/ArrearsDetailedInformationPage'
import PaginationPage from'./jscode/page/MySelfDataPage/PaginationPage'
import NewFriendPage from'./jscode/page/addressBook/NewFriendPage'
import AddFriendPage from'./jscode/page/addressBook/AddFriendPage'
import QueryFriendsPage from'./jscode/page/addressBook/QueryFriendsPage'
import DetailsPage from'./jscode/page/addressBook/DetailsPage'
import ModifyNotesPage from'./jscode/page/addressBook/ModifyNotesPage'
import FriendVerificationPage from'./jscode/page/addressBook/FriendVerificationPage'
import SetLabelPage from'./jscode/page/addressBook/SetLabelPage'
import FindFriendPage from'./jscode/page/addressBook/FindFriendPage'
import NewsTabPage from './jscode/tab/NewsTabPage'
import StartPage from'./jscode/StartPage'
import DeleteImgPage from './jscode/DeleteImgPage'
import ChatMessagesPage from './jscode/page/News/ChatMessagesPage'
const reducerCreate = params => {
    const defaultReducer = new Reducer(params);
    return (state, action) => {
        return defaultReducer(state, action);
    };
};

const getSceneStyle = () => ({
    backgroundColor: '#F5FCFF',
    shadowOpacity: 1,
    shadowRadius: 3,
});

// This is used in order to see requests on the Chrome DevTools
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

const App = () => (
    <Router
        createReducer={reducerCreate}
        getSceneStyle={getSceneStyle}>
        <Stack hideNavBar headerMode='screen' key="root">
            <Tabs
                key="TabBar"        // 唯一标识
                wrap={true}        // 自动使用自己的导航栏包装每个场景
                showLabel={true}   // 显示文字
                tabBarStyle={styles.tabBarStyle} // tabBar的样式
                swipeEnabled={false}// 是否可以滑动
                headerMode='screen'
                icon={TabIcon}
                lazy={true}
                labelStyle={styles.tabText}
                includeFontPadding={false}
                tabBarPosition={'bottom'}
                activeBackgroundColor='#f0f0f0'
                inactiveBackgroundColor='#f0f0f0'
                activeTintColor='#3090dd'
                inactiveTintColor='#000000'>
            <Scene
                hideNavBar={true}
                title='查询'
                key="EnquiriesTabPage"
                component={EnquiriesTabPage}
                gesturesEnabled={true}
                navTransparent={true}
                image={ImageUtil.EnquiriesTab}
                selectedImage={ImageUtil.enquiriesTabElect}
                onExit={() => console.log('onExit')}
            />
                <Scene
                    hideNavBar={true}
                    title='通讯录'
                    navBar={null}
                    key="AddressBookTabPage"
                    component={AddressBookTabPage}
                    gesturesEnabled={false}
                    image={ImageUtil.AddressBookTab}
                    selectedImage={ImageUtil.AddressBookTabElect}
                    onExit={() => console.log('onExit')}
                />
            <Scene
                title='消息'
                key="NewsTabPage"
                navTransparent={true}
                hideNavBar={true}
                component={NewsTabPage}
                gesturesEnabled={false}
                image={ImageUtil.News}
                selectedImage={ImageUtil.NewsElect}
                onExit={() => console.log('onExit')}
            />
            <Scene
                hideNavBar={true}
                navTransparent={true}
                title='我的'
                key="PersonalCenterTabPage"
                component={PersonalCenterTabPage}
                gesturesEnabled={false}
                image={ImageUtil.Personal}
                selectedImage={ImageUtil.PersonalElect}
                onExit={() => console.log('onExit')}
            />
            </Tabs>
            <Scene title='启动页'
                   initial={true}
                   key="StartPage"
                   onExit={() => console.log('onExit')}
                   component={StartPage}/>
            <Scene title='登录'
                   key="LoginPage"
                   onExit={() => console.log('onExit')}
                   component={LoginPage}/>
            <Scene title='验证码登录'
                   key="VerificationLoginPage"
                   onExit={() => console.log('onExit')}
                   component={VerificationLoginPage}/>
            <Scene title='注册（地址）'
                   key="RegistrationPage"
                   onExit={() => console.log('onExit')}
                   component={RegistrationPage}/>
            <Scene title='注册（验证码）'
                   key="RegistrationNextPage"
                   onExit={() => console.log('onExit')}
                   component={RegistrationNextPage}/>
            <Scene title='注册（登录）'
                   key="RegistrationPasswordLoginPage"
                   onExit={() => console.log('onExit')}
                   component={RegistrationPasswordLoginPage}/>
            <Scene title='上传老赖'
                   key="UploadPage"
                   onExit={() => console.log('onExit')}
                   component={UploadPage}/>
            <Scene title='查询老赖'
                   key="InquireResultPage"
                   onExit={() => console.log('onExit')}
                   component={InquireResultPage}/>
            <Scene title='老赖信息'
                   key="PersonalDataPage"
                   onExit={() => console.log('onExit')}
                   component={PersonalDataPage}/>
            <Scene title='修改资料'
                   key="ModifyPage"
                   onExit={() => console.log('onExit')}
                   component={ModifyPage}/>
            <Scene title='认证页面'
                   key="CertificationPage"
                   onExit={() => console.log('onExit')}
                   component={CertificationPage}/>
            <Scene title='审核通过'
                   key="BackUpDetailsPage"
                   onExit={() => console.log('onExit')}
                   component={BackUpDetailsPage}/>
            <Scene title='审核中'
                   key="AuditPage"
                   onExit={() => console.log('onExit')}
                   component={AuditPage}/>
            <Scene title='备份放贷'
                   key="ModifyLendingInformationPage"
                   onExit={() => console.log('onExit')}
                   component={ModifyLendingInformationPage}/>
            <Scene title='备份查看放贷'
                   key="LoanPersonalInformationPage"
                   onExit={() => console.log('onExit')}
                   component={LoanPersonalInformationPage}/>
            <Scene title='备份老赖'
                   key="ArrearsModifyInformationPage"
                   onExit={() => console.log('onExit')}
                   component={ArrearsModifyInformationPage}/>
            <Scene title='备份查看老赖'
                   key="ArrearsDetailedInformationPage"
                   onExit={() => console.log('onExit')}
                   component={ArrearsDetailedInformationPage}/>
            <Scene title='备份查看老赖'
                   key="PaginationPage"
                   onExit={() => console.log('onExit')}
                   component={PaginationPage}/>
            <Scene title='新的朋友'
                   key="NewFriendPage"
                   onExit={() => console.log('onExit')}
                   component={NewFriendPage}/>
            <Scene title='添加朋友'
                   key="AddFriendPage"
                   onExit={() => console.log('onExit')}
                   component={AddFriendPage}/>
            <Scene title='查询好友'
                   key="QueryFriendsPage"
                   onExit={() => console.log('onExit')}
                   component={QueryFriendsPage}/>
            <Scene title='详细资料'
                   key="DetailsPage"
                   onExit={() => console.log('onExit')}
                   component={DetailsPage}/>
            <Scene title='修改备注'
                   key="ModifyNotesPage"
                   onExit={() => console.log('onExit')}
                   component={ModifyNotesPage}/>
            <Scene title='发送好友验证消息'
                   key="FriendVerificationPage"
                   onExit={() => console.log('onExit')}
                   component={FriendVerificationPage}/>
            <Scene title='设置标签'
                   key="SetLabelPage"
                   onExit={() => console.log('onExit')}
                   component={SetLabelPage}/>
            <Scene title='查找好友'
                   key="FindFriendPage"
                   onExit={() => console.log('onExit')}
                   component={FindFriendPage}/>
            <Scene title='查找好友'
                   key="DeleteImgPage"
                   onExit={() => console.log('onExit')}
                   component={DeleteImgPage}/>
            <Scene title='聊天界面'
                   key="ChatMessagesPage"
                   onExit={() => console.log('onExit')}
                   component={ChatMessagesPage}/>
        </Stack>
    </Router>
);

const styles = StyleSheet.create({
    tabBarStyle: {
        backgroundColor: '#f0f0f0',
        height: 60,
        paddingBottom:5,
    },
    tabText:{
        fontSize:12,
    }
});

export default App;
